<!--
 * @Description: 日期组件
-->
<template>
  <div class="cpt_grey_disabled" v-if="disabled">{{
    Array.isArray(value) ? value.join(' 至 ') : value
  }}</div>
  <div class="_ehl_date" v-else>
    <quarter-picker
      v-if="dateType === 'quarterrange'"
      class="_ehl_daterange"
      type="monthrange"
      :key="dateType"
      :readonly="readonly"
      :disabled="disabled"
      :clearable="clearable"
      :picker-options="pickerOptions"
      placeholder="请选择季度"
      :range-separator="$t('common.zhi')"
      start-placeholder="开始季度"
      end-placeholder="结束季度"
      value-format="yyyy-MM"
      :value="value"
      @input="
        val => {
          radio = -1
          $emit('input', val)
          $emit('date-change', val)
        }
      "
    >
    </quarter-picker>
    <quarter-single
      v-else-if="dateType === 'quarter'"
      class="_ehl_daterange"
      type="month"
      :key="dateType"
      :readonly="readonly"
      :disabled="disabled"
      :clearable="clearable"
      :picker-options="pickerOptions"
      placeholder="请选择季度"
      start-placeholder="开始季度"
      end-placeholder="结束季度"
      value-format="yyyy-MM"
      :value="value"
      @input="
        val => {
          radio = -1
          $emit('input', val)
          $emit('date-change', val)
        }
      "
    ></quarter-single>
    <ehl-year-range
      v-else-if="dateType === 'yearrange'"
      :key="dateType"
      :readonly="readonly"
      :disabled="disabled"
      :clearable="clearable"
      :picker-options="pickerOptions"
      :value="value"
      @input="
        val => {
          radio = -1
          $emit('input', val)
          $emit('date-change', val)
        }
      "
    ></ehl-year-range>
    <el-time-picker
      class="_ehl_daterange"
      v-else-if="dateType === 'time' || dateType === 'timerange'"
      :key="dateType"
      :readonly="readonly"
      :disabled="disabled"
      :clearable="clearable"
      :is-range="dateType === 'timerange'"
      :value-format="format"
      :picker-options="pickerOptions"
      :placeholder="placeholder"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      :value="value"
      @input="
        val => {
          radio = -1
          $emit('input', val)
          $emit('date-change', val)
        }
      "
    >
    </el-time-picker>
    <el-date-picker
      v-else
      class="_ehl_daterange"
      :type="dateType"
      :key="dateType"
      :value-format="format"
      :readonly="readonly"
      :disabled="disabled"
      :clearable="clearable"
      :picker-options="pickerOptions"
      :placeholder="$t('common.xuanzeriqi')"
      :range-separator="$t('common.zhi')"
      :start-placeholder="startPlaceholder || $t('common.kaishiriqi')"
      :end-placeholder="endPlaceholder || $t('common.jieshuriqi')"
      :value="value"
      @input="
        val => {
          radio = -1
          $emit('input', val)
          $emit('date-change', val)
        }
      "
    >
    </el-date-picker>
    <slot v-if="showSlot" name="rangeradio" :data="value">
      <!-- 单选框 -->
      <ehl-radio-group
        class="_ehl_date_radio_group"
        v-model="radio"
        :options="options"
        :prop="prop"
        @init="
          (opts, val) => {
            $emit('init', opts, val)
          }
        "
        @change="val => dealDate(val)"
      >
      </ehl-radio-group>
    </slot>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { DatePicker, TimePicker } from 'element-ui'
  Vue.use(DatePicker)
  Vue.use(TimePicker)
  import QuarterPicker from '@/common/utils/lib/quarter-picker.js'
  import QuarterSingle from '@/common/utils/lib/quarter-single.js'
  Vue.use(QuarterPicker)
  Vue.use(QuarterSingle)
  export default {
    components: {
      ehlYearRange: () => $import('ehlYearRange'),
      ehlRadioGroup: () => $import('ehlRadioGroup'),
    },
    props: {
      value: { default: () => '' },
      //类型 time,timerange,date,daterange,datetime,datetimerange,quarterrange,quarter,yearrange
      dateType: { type: String, default: () => 'yearrange' },
      //完全只读
      readonly: { type: Boolean, default: () => false },
      //禁用
      disabled: { type: Boolean, default: () => false },
      //显示清空按钮
      clearable: { type: Boolean, default: () => false },
      //日期分隔符
      devide: { type: String, default: () => '-' },
      //是否展示扩展项
      showSlot: { type: Boolean, default: () => true },
      //日期选择器特有的选项
      pickerOptions: { type: Object, default: () => {} },
      //组件格式化使用
      format: { type: String, default: () => null },
      //moment格式化使用
      formatMoment: {
        type: String,
        default: () => `YYYY-MM-DD`,
      },
      //开始提示
      startPlaceholder: { type: String, default: () => null }, //date,daterange,datetime
      //结束提示
      endPlaceholder: { type: String, default: () => null }, //date,daterange,datetime
      //单时间选择提示
      placeholder: { type: String, default: () => '选择时间' }, //date,daterange,datetime
    },
    data() {
      return {
        radio: -1,
        //单选组的映射
        prop: { label: 'label', value: 'value' },
        //单选组的选项
        options: [
          { value: 7, label: '近七天' },
          { value: 30, label: '近30天' },
          { value: 180, label: '近半年' },
        ],
      }
    },
    methods: {
      dealDate(num) {
        if (this.readonly || this.disabled) {
          return
        }
        let moment = require('moment')
        let range = [
          moment().subtract(num, 'days').format(this.formatMoment),
          moment().format(this.formatMoment),
        ]
        this.$emit('input', range)
      },
    },
  }
</script>
